import { defineStore } from "pinia";
import { getBrowser } from "~/utils/tool";
import {
  postAIAddWorkInfoDownload,
  postAIComfyuiBalance,
} from "../service/yapi";

export const useAppStore = defineStore("app", () => {
  // 基本信息
  const info = ref<any>({
    editorURL: "/scratch/editor.html",
    isPlayerFullScreen: false,
    isScrollTop: true,
  });

  // 浏览器信息
  const browser = ref<any>(null);

  if (process.client) {
    setBrowser();
  }

  // 是否Mac 用于适配不同的input事件
  const isMac = ref(false);

  if (process.client) {
    isMac.value = /macintosh|mac os x/i.test(navigator.userAgent);
  }

  // 设置浏览器信息
  function setBrowser() {
    browser.value = getBrowser();
  }

  // 全局登录弹窗
  let loginModalVisible = ref(false);
  function toggleLoginModal() {
    console.log("切换登录弹窗");
    loginModalVisible.value = !loginModalVisible.value;
  }

  // 全局登录弹窗
  let currentWorkInfo = ref<any>({
    id: "24",

    inputFileUrl:
      "https://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/11/1726458710495-rok7k0k2a.jpg",
    fileUrl:
      "http://xiaobao2.oss-cn-beijing.aliyuncs.com/comfyui/apps/1/2d1b9c3e-be76-40b3-b018-637afae2be0f.png",

    favorsCount: 10,
  });
  let previewModalVisible = ref(false);
  function togglePreviewModal(workInfo: any) {
    console.log("切换预览弹窗");
    currentWorkInfo.value = workInfo;
    previewModalVisible.value = !previewModalVisible.value;
  }
  let mqttClientCtx = ref<any>(null);

  let balanceInfo = ref<any>({
    freeBalance: 5,
    payBalance: 0,
    currentDayFreeCount: 0,
    currentDayPayCount: 0,
    currentDayFreeCost: 0,
    currentDayPayCost: 0,
    vipTypeStr: "普通用户",
    expireTime: "",
  });
  let totalBalance = computed(() => {
    let total = 0;
    if (balanceInfo.value.payBalance) {
      total += balanceInfo.value.payBalance;
    }
    let validFreeBalance =
      balanceInfo.value.freeBalance - balanceInfo.value.currentDayFreeCost;
    return total + validFreeBalance;
  });

  async function refreshBalance() {
    let res: any = await postAIComfyuiBalance({});

    balanceInfo.value = res.data;
  }
  async function resetBalance() {
    balanceInfo.value = {
      freeBalance: 5,
      payBalance: 0,
      currentDayFreeCount: 0,
      currentDayPayCount: 0,
      currentDayFreeCost: 0,
      currentDayPayCost: 0,
      vipTypeStr: "普通用户",
      expireTime: "",
    };
  }

  let downloadByUrl = async (item: any) => {
    let { id, url, name } = item;
    if (!url) {
      return;
    }
    postAIAddWorkInfoDownload({ id: id });
    url = url.replace(
      "http://xiaobao2.oss-cn-beijing.aliyuncs.com",
      "https://cdn.codinghou.cn"
    );
    let Img = new Image(),
      dataURL = "";
    let fileName = `${name}.png`;
    Img.src = url;
    // 处理跨域
    Img.setAttribute("crossOrigin", "Anonymous");

    // 监听图片加载好
    Img.onload = function () {
      let canvas: any = document.createElement("canvas"),
        width = Img.width,
        height = Img.height;
      canvas.width = width;
      canvas.height = height;
      canvas.getContext("2d").drawImage(Img, 0, 0, width, height);
      dataURL = canvas.toDataURL("image/png");
      let eleLink = document.createElement("a");
      eleLink.download = fileName;
      eleLink.style.display = "none";
      eleLink.href = dataURL;
      document.body.appendChild(eleLink);
      eleLink.click();
      document.body.removeChild(eleLink);
    };
  };
  // 作品类型列表 - 从页面组件移动到这里
  const workTypeList = ref([
    { label: "全部", value: "" },
    { label: "古诗词配图", value: "古诗词配图" },
    { label: "语文插图", value: "语文插图" },
    { label: "迪士尼", value: "迪士尼" },
    { label: "吉卜力", value: "吉卜力" },
  ]);
  return {
    info,
    browser,

    isMac,
    balanceInfo,
    totalBalance,
    workTypeList,

    refreshBalance,
    resetBalance,
    loginModalVisible,
    mqttClientCtx,
    toggleLoginModal,
    setBrowser,
    downloadByUrl,
    previewModalVisible,
    togglePreviewModal,
    currentWorkInfo,
  };
});
